<template>
  <div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              prop="sid"
              label="学号"
              align="center"
              width="180">
      </el-table-column>
      <el-table-column
              label="姓名"
              align="center"
              prop="sname">
      </el-table-column>
      <el-table-column
              label="性别"
              prop="sex"
              align="center">
      </el-table-column>
      <el-table-column
              label="年龄"
              prop="age"
              align="center">
      </el-table-column>
      <el-table-column
              label="住址"
              prop="addr"
              align="center">
      </el-table-column>
      <el-table-column
              label="所在班级"
              prop="cid"
              align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    //1. 前端的模型数据
    data() {
      return {
        tableData: []
      }
    },
    //2. 当vue对象加载完毕后，执行从后台取数据的操作 (调用方法在这里)
    created() {
      this.findAllStudents()
    },
    //3. 定义普通方法，一般定义与事件绑定的方法（定义方法在这里）
    methods: {
      //3.1 加载所有的学生列表
      findAllStudents(){
        this.$axios.get("/student?cmd=list").then(({data}) => {
          console.log("data:",data)
          this.tableData = data.data
        })
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
